<!-- 推广商品 -->
<template>
	<view class="promotion-goods-wrap">
		<view class="goods-list u-flex" v-for="(item, index) in goodsList" :key="item.goods_id"
			@tap="jump('/pages/goods/detail', { id: item.id })">
			<view class="img-box">
				<image class="goods-img" :src="item.image" mode=""></image>
			</view>
			<view class="goods-info u-flex-col u-row-between">
				<view class="goods-title u-ellipsis-1">{{ item.title }}</view>
				<view class="goods-des u-ellipsis-1">{{ item.subtitle }}</view>
				<view class="goods-price u-flex font-OPPOSANS">
					<view class="price">￥{{ item.price }}</view>
					<view class="origin-price">￥{{ item.sku_price[0].market_price }}</view>
				</view>
				<view class="commission-num">预计佣金：￥{{ item.commission_money }}</view>
			</view>
			<!-- <button class="share-btn u-reset-button" @tap.stop="toShare(index)">分享赚</button> -->
		</view>

		<!-- 	分享组件 -->
		<shopro-share v-model="showShare" :posterInfo="posterInfo" :posterType="'goods'"></shopro-share>
		<!-- 缺省页 -->
		<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据"></shopro-empty>
		<!-- 更多 -->
		<u-loadmore v-if="goodsList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
	</view>
</template>

<script>
	import shoproShare from '@/components/shopro-share/shopro-share';
	import shoproEmpty from '@/components/shopro-empty/shopro-empty.vue'
	import shoproNavbar from '@/components/shopro-navbar/shopro-navbar.vue'
	import share from '../../../shopro/share/index.js'
	export default {
		components: {
			shoproShare,
			shoproEmpty,
			shoproNavbar
		},
		data() {
			return {
				showShare: false, //是否分享
				posterInfo: {}, //分享信息
				goodsList: [], //分销商品
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				isEmpty: false
			};
		},
		computed: {},
		onLoad() {
			this.getGoodList();
		},
		onUnload() {
			// share.setShareInfo();
		},
		onReachBottom() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getGoodList();
			}
		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 去分享
			toShare(index) {
				const that = this;
				let goodsInfo = this.goodsList[index];
				this.posterInfo = goodsInfo;
				console.log(goodsInfo)
					this.showShare = true;
				// share.setShareInfo({
				// 	title: goodsInfo.title,
				// 	desc: goodsInfo.subtitle,

				// 	image: goodsInfo.image,
				// 	params: {
				// 		page: 2,
				// 		pageId: goodsInfo.id
				// 	}
				// });
			
			},
			getGoodList() {
				let that = this;
				that.loadStatus = 'loading';
				// commission.goods/index
				uni.request({
					url: `${this.$wanlshop.config('shoproUrl')}/commission.goods/index`,
					header: {
						'token': uni.getStorageSync("wanlshop:user").token
					},
					data: {
						page: that.currentPage
					},
					success: (res) => {
						console.log(res)
						uni.stopPullDownRefresh();
						if (res.data.code == 1) {
							that.goodsList = [...that.goodsList, ...res.data.data.data];
							that.amount = res.data.data.amount;
							that.lastPage = res.data.data.last_page;
							that.isEmpty = !that.goodsList.length;
							that.loadStatus = that.currentPage < res.data.data.last_page ? 'loadmore' :
								'nomore';
						}
					}
				});
				// that.$http('commission.goods', {
				// 	page: that.currentPage
				// }).then(res => {
				// 	if (res.code === 1) {
				// 		that.goodsList = [...that.goodsList, ...res.data.data];
				// 		that.lastPage = res.data.last_page;
				// 		that.isEmpty = !that.goodsList.length;
				// 		that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				// 	}
				// });
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	// 推广商品列表
	.goods-list {
		padding: 30rpx;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
		position: relative;

		.share-btn {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			width: 160rpx;
			line-height: 60rpx;
			background: linear-gradient(90deg, #a36fff, #5336ff);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #fff;
			font-weight: 500;
		}

		.img-box {
			border: 1rpx solid rgba(223, 223, 223, 0.43);
			margin-right: 30rpx;

			.goods-img {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.goods-info {
			align-items: flex-start;
			height: 200rpx;

			.goods-title {
				width: 400rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 10rpx;
			}

			.goods-des {
				width: 400rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #a8700d;
				margin-bottom: 10rpx;
			}

			.goods-price {
				margin-bottom: 10rpx;

				.price {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					margin-right: 16rpx;
				}

				.origin-price {
					font-size: 24rpx;

					font-weight: 400;
					text-decoration: line-through;
					color: #999999;
				}
			}

			.commission-num {
				font-size: 24rpx;
				font-weight: 500;
				color: #5e4ddf;
			}
		}
	}
</style>
